<template>
    <view>
		<view class="tab flex flex-j-center">
			<view class="tab-list flex flex-a-center flex-j-center">
				<view class="tab-item" :class="tabCur == index?'on':''" v-for="(tab,index) in tabList" :key="index" @click="tabClick(index)">{{tab}}</view>
			</view>
		</view>
		<view class="date">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
				<view class="flex flex-a-center flex-j-center">
					<image class="date-icon" src="../../../static/icons/jewel/date.png"></image>{{date}}
				</view>
			</picker>
		</view>
		<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		<block v-if="type == 'sleep'">
			<view class="sleep-title flex flex-j-center flex-a-center">总睡眠<view class="sleep-info-time"><text class="num">08</text>小时<text class="num">20</text>分</view></view>
			<view class="sleep-info flex flex-a-center flex-j-center">
				<view class="sleep-info-item">
					<view class="sleep-info-text wakeup">醒来</view>
					<view class="sleep-info-time"><text class="num">00</text>小时<text class="num">10</text>分</view>
				</view> 
				<view class="sleep-info-item">
					<view class="sleep-info-text deep">深度睡眠</view>
					<view class="sleep-info-time"><text class="num">01</text>小时<text class="num">10</text>分</view>
				</view> 
				<view class="sleep-info-item">
					<view class="sleep-info-text easy">浅度睡眠</view>
					<view class="sleep-info-time"><text class="num">06</text>小时<text class="num">30</text>分</view>
				</view> 
				<view class="sleep-info-item">
					<view class="sleep-info-text rem">REM睡眠</view>
					<view class="sleep-info-time"><text class="num">00</text>小时<text class="num">30</text>分</view>
				</view> 
			</view>
		</block>
		<block v-if="type == 'temperature'">
			<view class="temperature-info flex flex-a-center flex-j-center">
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon" mode="widthFix" src="../../../static/images/jewel/health/low.png"></image>
					<view class="temperature-info-item-text">最低体温</view>
					<view class="temperature-info-item-num">{{Math.min(...infoData)}}℃</view>
				</view> 
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon" mode="widthFix" src="../../../static/images/jewel/health/high.png"></image>
					<view class="temperature-info-item-text">最高体温</view>
					<view class="temperature-info-item-num">{{Math.max(...infoData)}}℃</view>
				</view>
			</view>
		</block>
		<block v-if="type == 'heart'">
			<view class="blood-info flex flex-a-center flex-j-center">
				<view class="blood-info-item flex1">
					<image class="blood-info-item-icon" mode="widthFix" src="../../../static/images/jewel/health/min.png"></image>
					<view class="blood-info-item-text">最小心率</view>
					<view class="blood-info-item-num">{{Math.min(...infoData)}}bpm</view>
				</view> 
				<view class="blood-info-item flex1">
					<image class="blood-info-item-icon" mode="widthFix" src="../../../static/images/jewel/health/average.png"></image>
					<view class="blood-info-item-text">平均心率</view>
					<view class="blood-info-item-num">{{infoData[1]}}bpm</view>
				</view>
				<view class="blood-info-item flex1">
					<image class="blood-info-item-icon" mode="widthFix" src="../../../static/images/jewel/health/max.png"></image>
					<view class="blood-info-item-text">最大心率</view>
					<view class="blood-info-item-num">{{Math.max(...infoData)}}bpm</view>
				</view>
			</view>
		</block>
		<block v-if="type == 'blood'">
			<view class="temperature-info flex flex-a-center flex-j-center">
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon" src="../../../static/images/jewel/health/blood-range.png"></image>
					<view class="temperature-info-item-text blood-text">血压范围</view>
					<view class="temperature-info-item-num">{{Math.min(...infoData)}}~{{Math.max(...infoData)}} mmHg</view>
				</view> 
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon" src="../../../static/images/jewel/health/blood-day.png"></image>
					<view class="temperature-info-item-text blood-text">日均血压</view>
					<view class="temperature-info-item-num">{{infoData[1]}} mmHg</view>
				</view>
			</view>
		</block>
		<block v-if="type == 'spo'">
			<view class="temperature-info flex flex-a-center flex-j-center">
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon spo-icon" src="../../../static/images/jewel/health/spo-range.png"></image>
					<view class="temperature-info-item-text blood-text">血氧范围</view>
					<view class="temperature-info-item-num">{{Math.min(...infoData)}}~{{Math.max(...infoData)}} SpO2</view>
				</view> 
				<view class="temperature-info-item flex1">
					<image class="temperature-info-item-icon spo-icon" src="../../../static/images/jewel/health/spo-day.png"></image>
					<view class="temperature-info-item-text blood-text">日均血氧</view>
					<view class="temperature-info-item-num">{{infoData[1]}} SpO2</view>
				</view>
			</view>
		</block>
    </view>
</template>
<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import jewel from '@/common/common_zb.js';
	var _self;
	var canvaLineA=null;
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				isShowLoading: false,
				member_id:uni.getStorageSync('userInfo').member_id,
				tabList:["日","30天","6个月","一年"],
				tabCur:0,
				infoData:[],
				date:currentDate,
				type:'',
				color:'gray',
				color2:'',
				range:[0,100],
				chartdefaultData:[]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.type = option.type
			this.getChartContfig()
			this.getServerData();
			uni.setNavigationBarTitle({
				title:option.name
			})
		},
		methods: {
			getChartContfig(){
				switch(_self.type){
					case "sleep":
						_self.color = "#f43e3e"
					break;
					case "temperature":
						_self.color = "#25a10d"
						_self.range = [30,45]
					break;
					case "heart":
						_self.color = "#ed7c32"
						_self.color2 = "#e8a422"
						_self.range = [0,100]
					break;
					case "blood":
						_self.color = "#f43e3e"
						_self.range = [0,200]
					break;
					case "spo":
						_self.color = "#ed346d"
						_self.range = [0,100]
					break;
				}
			},
			random(lower, upper) {
				return Math.floor(Math.random() * (upper - lower+1)) + lower;
			},
			tabClick(index){
				_self.tabCur = index
				_self.changeData()
			},
			getServerData(){
				
				let that = this;
				that.isShowLoading = true;
				let senddata = {type: _self.type, member_id: that.member_id, create_time: '2021-01-11', time_type: '日'};
				jewel.get('Health/data_list',senddata,false,function(res){
					that.isShowLoading = false;
					if(res.data.code == 0){
						that.healthdatas = res.data.data
						let data = _self.type == 'temperature'?that.healthdatas.data:that.healthdatas.data
						let Mix={categories:[],series:[]};
							Mix.categories=that.healthdatas.categories;
							Mix.series=[
								{"name":"曲面","data":data,"type":"area","style":"curve","color":_self.color},
								{"name":"曲线","data":data,"type":"line","style":"curve","color":_self.color,"disableLegend":true}
							];
						_self.showLineA("canvasLineA",Mix);
						_self.infoData = Mix.series[0].data
					}
				});
			},
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'mix',
					fontSize:11,
					legend:false,
					dataLabel:false,
					dataPointShape:false,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#e6e6e6',
						gridType:'dash',
						dashLength:0,
						disabled: false, //不显示x轴
						disableGrid: true,
						rotate:45,
					},
					yAxis: {
						gridType:'soild',
						gridColor:'#e6e6e6',
						dashLength:8,
						splitNumber:4,
						min:_self.range[0],
						max:_self.range[1],
						format:(val)=>{return val.toFixed(0)}
					},
					
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'curve'
						}
					}
				});
				
			},
			changeData() {
				let data = _self.type == 'temperature'?[_self.random(30,45),_self.random(30,45),_self.random(30,45)]:[_self.random(1,100),_self.random(1,100),_self.random(1,100)]
				
				let newdata = {
					categories:["9:00","9:30","10:00"],
					series:[
						{"name":"曲面","data":data,"type":"area","style":"curve","color":_self.color},
						{"name":"曲线","data":data,"type":"line","style":"curve","color":_self.color,"disableLegend":true},
					]};
				canvaLineA.updateData({
					series: newdata.series,
					categories: newdata.categories
				});
				_self.infoData = data
			},
			touchLineA(e) {
				// canvaLineA.showToolTip(e, {
				// 	format: function (item, category) {
				// 		return category + ':' + item.data 
				// 	}
				// });
			},
			bindDateChange: function(e) {
				_self.date = e.target.value
				_self.changeData()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		&1{
			flex: 1;
		}
		&-a-center{
			align-items: center;
		}
		&-a-start{
			align-items: flex-start;
		}
		&-a-end{
			align-items: flex-end;
		}
		&-j-center{
			justify-content: center;
		}
		&-j-start{
			justify-content: flex-start;
		}
		&-j-end{
			justify-content: flex-end;
		}
	}
	.tab{
		padding: 40rpx 0;
		&-list{
			border: 2rpx solid #209818;
			border-radius: 5rpx;
		}
		&-item{
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-right: 2rpx solid #209818;
			color: #209818;
			font-size: 28rpx;
			&:last-child{
				border-right: 0;
			}
		}
		.on{
			background-color: #209818;
			color: #FFFFFF;
		}
	}
	.date{
		color: #209818;
		font-size: 28rpx;
		height: 80rpx;
		&-icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 15rpx;
		}
	}
	.blood-info{
		padding: 50rpx 0;
		&-item{
			text-align: center;
			&-icon{
				width: 86rpx;
				height: 52rpx;
			}
			&-text{
				color: #4d4d4d;
				font-size: 28rpx;
				padding: 10rpx 0;
			}
			&-num{
				color: #209818;
				font-size: 36rpx;
			}
		}
	}
	.sleep{
		&-title{
			text-align: center;
			color: #4d4d4d;
			font-size: 28rpx;
			padding: 50rpx 0;
			.sleep-info-time{
				margin-left: 10rpx;
			}
		}
		&-info{
			flex-wrap: wrap;
			&-text{
				position: relative;
				padding-left: 30rpx;
				color: #4d4d4d;
				font-size: 28rpx;
				margin-bottom: 15rpx;
				&::after{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 20rpx;
					height: 20rpx;
				}
				&.wakeup{
					&::after{
						background-color: #ff6f6f;
					}
				}
				&.deep{
					&::after{
						background-color: #46af2d;
					}
				}
				&.easy{
					&::after{
						background-color: #74d25d;
					}
				}
				&.rem{
					&::after{
						background-color: #eeca04;
					}
				}
				
			}
			&-time{
				color: #9a9a9a;
				.num{
					font-size: 36rpx;
					color: #333333;
					padding: 0 5rpx;
				}
			}
			&-item{
				width: 50%;
				padding-left: 60rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;
			}
		}
	}
	.temperature-info{
		margin-top: 100rpx;
		&-item{
			text-align: center;
			&-icon{
				width: 46rpx;
				height: 70rpx;
				&.spo-icon{
					width: 56rpx;
					height: 56rpx;
				}
			}
			&-text{
				font-size: 28rpx;
				color: #209818;
				padding: 10rpx 0;
				&.blood-text{
					color: #4d4d4d;
				}
			}
			&-num{
				font-weight: bold;
				font-size: 36rpx;
				color: #209818;
			}
		}
	}
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>